<template>
  <div>
    <div>
      <el-form :inline="true" :model="deviceLike" class="demo-form-inline">
        <el-row>
          <el-col :span="5">
            <el-form-item>
              设备型号<el-input v-model="deviceLike.no" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              设备名称<el-input v-model="deviceLike.name" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              采购人员<el-input v-model="deviceLike.buyuser" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              审批人<el-input v-model="deviceLike.checkuser" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="selectLike()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table :data="deviceList" style="width: 100%">
      <el-table-column prop="id" label="序号" width="70"> </el-table-column>
      <el-table-column prop="no" label="设备型号" width="120">
      </el-table-column>
      <el-table-column prop="name" label="设备名"> </el-table-column>
      <el-table-column prop="price" label="采购单价(万)"> </el-table-column>
      <el-table-column prop="buycount" label="采购数量"> </el-table-column>
      <el-table-column prop="totalmoney" label="总价(万)"> </el-table-column>
      <el-table-column prop="usecount" label="分配总数"> </el-table-column>
      <el-table-column prop="buydate" label="购买时间"> </el-table-column>
      <el-table-column prop="buyuser" label="采购人员"> </el-table-column>
      <el-table-column prop="checkuser" label="领导"> </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="getOne(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deletOne(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[8, 15, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
      </el-pagination>
    </div>

    <el-dialog title="修改设备" :visible.sync="dialogFormVisible">
      <el-form :model="device">
        <el-form-item label="设备型号" :label-width="formLabelWidth">
          <el-input v-model="device.no" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备名" :label-width="formLabelWidth">
          <el-input v-model="device.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购单价(万)" :label-width="formLabelWidth">
          <el-input v-model="device.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购数量" :label-width="formLabelWidth">
          <el-input v-model="device.buycount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总价(万)" :label-width="formLabelWidth">
          <el-input v-model="device.totalmoney" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分配总数" :label-width="formLabelWidth">
          <el-input v-model="device.usecount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买时间" :label-width="formLabelWidth">
          <span class="dtime"></span>
          <el-date-picker v-model="device.time" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="采购人员" :label-width="formLabelWidth">
          <el-input v-model="device.buyuser" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="领导" :label-width="formLabelWidth">
          <el-input v-model="device.checkuser" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOne()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      deviceList: [],
      deviceLike: {},
      device: {},
      dialogFormVisible: false,
      formLabelWidth: "120px",
      pageInfo: {
        pageNum: 1,
        pageSize: 8,
      },
    };
  },
  methods: {
    selectLike() {
      this.$axios
        .get(
          "device/selectLike?no=" +
          this.deviceLike.no +
          "&name=" +
          this.deviceLike.name +
          "&buyuser=" +
          this.deviceLike.buyuser +
          "&checkuser=" +
          this.deviceLike.checkuser
        )
        .then((result) => {
          this.$message(result.data.message);
          if (result.data.code == 200) {
            this.deviceList = result.data.data;
            for (let i = 0; i < this.deviceList.length; i++) {
              this.deviceList[i].buydate = result.data.data[i].buydate.substring(0, 10);
            }
          }
          this.dialogFormVisible = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.list();
    },
    updateOne() {
      this.$axios
        .post("device/updateOne", this.device)
        .then((result) => {
          this.$message(result.data.message);
          if (result.code == 200) {
            this.list();
          }
          this.dialogFormVisible = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getOne(id) {
      this.dialogFormVisible = true;
      this.$axios
        .get("device/getOne?id=" + id)
        .then((result) => {
          if (result.data.code == 200) {
            this.device = result.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    deletOne(id) {
      this.$axios
        .delete("device/deletOne?id=" + id)
        .then((result) => {
          this.$message(result.data.message);
          if (result.data.code == 200) {
            this.list();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    list() {
      this.$axios
        .get(
          "device/selectBaseStockAll?pageNum=" +
          this.pageInfo.pageNum +
          "&pageSize=" +
          this.pageInfo.pageSize
        )
        .then((result) => {
          let vo = result.data;
          if (vo.code == 200) {
            this.deviceList = vo.data.list;
            this.pageInfo = vo.data;
            for (let i = 0; i < this.deviceList.length; i++) {
              this.deviceList[i].buydate = vo.data.list[i].buydate.substring(0, 10);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  mounted() {
    this.list();
  },
};
</script>

<style></style>
